<template>
  <div class="my-data-all">
    <el-row type="flex" style="justify-content: flex-start;">
      <el-col v-if="totalOptions" class="data-preview-box">
        <data-preview :options="totalOptions"></data-preview>
      </el-col>
      <el-col class="data-preview-box">
        <data-preview :options="uvOptions"></data-preview>
      </el-col>
      <el-col class="data-preview-box">
        <data-preview :options="pvOptions"></data-preview>
      </el-col>
      <el-col class="data-preview-box">
        <data-preview :options="shareOptions"></data-preview>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import DataPreview from '@/views/child/admin/adminData/DataPreview.vue';

  export default {
    components: {
      DataPreview,
    },
    props: ['navPrev'],
    computed: {
      totalOptions() {
        if(!this.navPrev || isNaN(this.navPrev.num)) return null;
        let num = this.navPrev&&this.navPrev.num?this.navPrev.num:0;
        return {
          style: 'pre-blue',
          num: num>10000?(num/10000 + '万'):num,
          title: '总作品量',
          time: this.navPrev && this.navPrev.time ? this.navPrev.time : '',
          icon: 'jy-icon-amount',
        }
      },
      uvOptions() {
        let uv = this.navPrev && this.navPrev.uv ? this.navPrev.uv : 0;
        return {
          style: 'pre-light-green',
          num: uv > 10000 ? (uv/10000 + '万') : uv,
          title: '总访客数 UV',
          time: this.navPrev && this.navPrev.time ? this.navPrev.time : '',
          icon: 'jy-icon-visitors',
        }
      },
      pvOptions() {
        let pv = this.navPrev && this.navPrev.pv ? this.navPrev.pv : 0;
        return {
          style: 'pre-light-blue',
          num: pv > 10000 ? (pv/10000 + '万') : pv,
          title: '总浏览量 PV',
          time: this.navPrev && this.navPrev.time ? this.navPrev.time : '',
          icon: 'jy-icon-views',
        }
      },
      shareOptions() {
        let shareNum = this.navPrev
          && this.navPrev.wb && !isNaN(parseInt(this.navPrev.wb))
          && this.navPrev.wx && !isNaN(parseInt(this.navPrev.wx))
          ? parseInt(this.navPrev.wb) + parseInt(this.navPrev.wx)
          : 0;
        return {
          style: 'pre-pink',
          num: shareNum>10000?(shareNum/10000 + '万'):shareNum,
          title: '总分享量',
          time: this.navPrev && this.navPrev.time ? this.navPrev.time : '',
          icon: 'jy-icon-share',
        }
      },
    },
  }
</script>
